<template>
<div class='table'>
  <div>
    <el-table
    :data="tableData"
    stripe
    class="w-full"
    >
    <el-table-column
     v-for="(item, index) in tableTitle"
     :key="index"
     :prop="item.prop"
     :label="item.label"
     :width="item.width || 'auto'"
       >
       <template slot-scope="scope">
         <span v-if="item.type === 'text'">{{
          item.filter ? item.filter(scope.row) : scope.row[item.prop]}}</span>
         <div v-if="item.type === 'btn'">
          <el-button
           v-for="(btn , index) in item.btn"
          :key="index"
          :type="btn.type || 'primary'"
          :icon="btn.icon"
          @click="btn.handlerClick(scope.row)"
          >
          {{ btn.name }}
        </el-button>
         </div>
       </template>
      </el-table-column>
  </el-table>
  </div>
</div>
</template>

<script>
/**
 *  1. 渲染的数据
 *  2. 表头
 *  3. 内容自定义
 *    - 按钮
 *    - 图片
 *    - input
 *    - switch 开关
 */
export default {
  name: 'bdTable',
  props: {
    // 渲染数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 表头
    tableTitle: {
      type: Array,
      require: true
    }
  },
  components: { }, // 定义子组件
  data () {
    return {
    }
  },
  computed: {}, // 计算
  watch: {}, // 监视
  methods: {
  },
  mounted () {

  }
}
</script>
<style lang='scss' scoped>

</style>
